<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
</head>

<body>

    <ul id="source">
        <li>北京空气质量：
            <b>90</b>
        </li>
        <li>上海空气质量：
            <b>70</b>
        </li>
        <li>天津空气质量：
            <b>80</b>
        </li>
        <li>广州空气质量：
            <b>50</b>
        </li>
        <li>深圳空气质量：
            <b>40</b>
        </li>
        <li>福州空气质量：
            <b>32</b>
        </li>
        <li>成都空气质量：
            <b>90</b>
        </li>
    </ul>

    <ul id="resort">
        <!-- 
    <li>第一名：北京空气质量：<b>90</b></li>
    <li>第二名：北京空气质量：<b>90</b></li>
    <li>第三名：北京空气质量：<b>90</b></li>
     -->

    </ul>

    <button id="sort-btn">排序</button>

    <script type="text/javascript">

        /**
         * getData方法
         * 读取id为source的列表，获取其中城市名字及城市对应的空气质量
         * 返回一个数组，格式见函数中示例
         */
        //firstChild 与 firstElementChild的区别
        function getData() {
            var tUl = document.getElementById('source');
            var data = new Array();
            var list = document.getElementsByTagName("li");
            for(var i = 0; i < list.length; i++) {
                var cityStr = list[i].firstChild.nodeValue;  //匿名文字结点也包括, node与元素的区别
                var aqiValue = list[i].firstElementChild.innerHTML;//元素;
                console.log("11111111 " + cityStr + " aqiValue: " + aqiValue);
                data.push([cityStr, aqiValue]);
            }

            /*
            data = [
              ["北京", 90],
              ["北京", 90]
              ……
            ]
            */

            return data;

        }

        /**
         * sortAqiData
         * 按空气质量对data进行从小到大的排序
         * 返回一个排序后的数组
         */
        function sortAqiData(data) {
            data.sort(function (a, b) {
                return b[1] - a[1];
            });

            return data;
        }

        /**
         * render
         * 将排好序的城市及空气质量指数，输出显示到id位resort的列表中
         * 格式见ul中的注释的部分
         */
        function render(data) {
            var tAqilist = document.getElementById("resort");
            var ranke = 0;
            var rankeSocre = 1000;
            for (var i in data) {
                var aqi = data[i];
                if (aqi[1] > 60) {
                    if (rankeSocre != aqi[1]) {
                        ranke += 1;
                    }

                    var para = document.createElement("li");
                    var textNode = document.createTextNode("第" + ranke + "名: " + aqi[0] + " " + aqi[1]);
                    para.appendChild(textNode);
                    tAqilist.appendChild(para);

                    rankeSocre = aqi[1];
                }
                else {
                    break;
                }
            }
        }

        function btnHandle() {
            var aqiData = getData();
            aqiData = sortAqiData(aqiData);
            render(aqiData);
        }

        function init() {

            // 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数
            document.getElementById('sort-btn').onclick = btnHandle;
        }

        init();

    </script>
</body>

</html>